<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ArrowDown, Mail, MessageCircle, Github } from 'lucide-vue-next'
import ProjectCard from '@/components/ProjectCard.vue'
import ProjectDetail from '@/components/ProjectDetail.vue'
import { projects, getCategoryName } from '@/data/projects'
import type { Project } from '@/data/projects'

// 响应式数据
const selectedCategory = ref<string>('all')
const selectedProject = ref<Project | null>(null)
const scrollY = ref(0)
const showNavbar = ref(false)
const lastScrollY = ref(0)
const navbar = ref(null)
const detailViewMode = ref<'modal' | 'page'>('modal')

// 分类选项
const categories = [
  { key: 'mobile', name: '移动应用' },
  { key: 'web', name: '网页应用' },
  { key: 'admin', name: '管理后台' },
  { key: 'outsourcing', name: '外包项目' }
]

// 计算属性：过滤后的项目
const filteredProjects = computed(() => {
  if (selectedCategory.value === 'all') {
    return projects
  }
  return projects.filter(project => project.category === selectedCategory.value)
})

// 方法
const scrollToProjects = () => {
  const element = document.getElementById('projects')
  element?.scrollIntoView({ behavior: 'smooth' })
}

const scrollToContact = () => {
  const element = document.getElementById('contact')
  element?.scrollIntoView({ behavior: 'smooth' })
}

const openProjectDetail = (project: Project) => {
  if (detailViewMode.value === 'modal') {
    // 弹窗模式
    selectedProject.value = project
    document.body.style.overflow = 'hidden'
  } else {
    // 新标签页模式
    const projectUrl = `/project/${project.id}`
    window.open(projectUrl, '_blank')
  }
}

const closeProjectDetail = () => {
  selectedProject.value = null
  // 恢复背景滚动
  document.body.style.overflow = 'auto'
}

const handleScroll = () => {
  scrollY.value = window.scrollY

  // 控制导航栏显示/隐藏 - 只在标题消失后显示
  const heroSection = document.querySelector('.hero-section')
  if (heroSection) {
    const heroHeight = (heroSection as HTMLElement).offsetHeight
    // 当滚动超过首屏高度的80%时，显示导航栏
    showNavbar.value = scrollY.value > heroHeight * 0.8
  }

  lastScrollY.value = scrollY.value
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll, { passive: true })
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <div class="min-h-screen bg-dark-bg text-dark-text">
    <!-- 固定导航栏 -->
    <nav
      ref="navbar"
      :class="[
        'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
        showNavbar ? 'translate-y-0' : '-translate-y-full',
        scrollY > 100 ? 'bg-dark-bg/95 backdrop-blur-md border-b border-dark-border' : 'bg-transparent'
      ]"
    >
      <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
        <div
          :class="[
            'font-bold transition-all duration-300',
            scrollY > 100 ? 'text-2xl text-trae-green' : 'text-xl text-white'
          ]"
        >
          火之夜工作室
        </div>
        <div class="flex items-center gap-6">
          <button
            @click="scrollToProjects"
            class="text-dark-muted hover:text-white transition-colors duration-300"
          >
            作品集
          </button>
          <button
            @click="scrollToContact"
            class="text-dark-muted hover:text-white transition-colors duration-300"
          >
            联系我们
          </button>
        </div>
      </div>
    </nav>

    <!-- 品牌介绍区 -->
    <section class="hero-section h-[80vh] flex items-center justify-center relative overflow-hidden">
      <!-- 苹果风格的动态背景 -->
      <div class="absolute inset-0">
        <div class="absolute inset-0 bg-gradient-to-br from-dark-bg via-dark-secondary to-dark-bg"></div>
        <div class="absolute inset-0 bg-gradient-to-tr from-trae-green/5 via-transparent to-blue-500/5"></div>
        <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-trae-green/10 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
      </div>
      <div class="relative z-10 text-center max-w-4xl mx-auto px-6">
        <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent animate-fade-in">
          火之夜工作室
        </h1>
        <p class="text-lg md:text-xl text-dark-muted mb-8 animate-slide-up">
          专注于创新技术解决方案，点燃数字世界的无限可能
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center animate-slide-up">
          <button
            @click="scrollToProjects"
            class="group relative px-8 py-3 bg-trae-green hover:bg-emerald-600 text-white rounded-xl font-semibold transition-all duration-300 hover:scale-105 apple-shadow hover:apple-shadow-hover overflow-hidden"
          >
            <span class="relative z-10">查看作品集</span>
            <div class="absolute inset-0 bg-gradient-to-r from-trae-green to-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </button>
          <button
            @click="scrollToContact"
            class="group relative px-8 py-3 bg-white/10 backdrop-blur-sm border border-white/20 text-white hover:text-trae-green rounded-xl font-semibold transition-all duration-300 hover:scale-105 glass-effect overflow-hidden"
          >
            <span class="relative z-10">联系我们</span>
            <div class="absolute inset-0 bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </button>
        </div>
      </div>

      <!-- 滚动提示 -->
      <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
        <div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
          <div class="w-1 h-3 bg-white/50 rounded-full mt-2 animate-pulse"></div>
        </div>
      </div>
    </section>

    <!-- 首屏作品预览区 -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-dark-bg to-dark-secondary">
      <div class="max-w-7xl mx-auto">
        <div class="text-center mb-12">
          <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">
            精选作品预览
          </h2>
          <p class="text-dark-muted">
            探索我们的创新成果
          </p>
        </div>

        <!-- 作品预览卡片 - 仿苹果风格 -->
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="project in projects.slice(0, 3)"
            :key="project.id"
            @click="openProjectDetail(project)"
            class="group cursor-pointer bg-dark-bg/50 backdrop-blur-sm rounded-2xl overflow-hidden border border-dark-border/50 hover:border-trae-green/50 transition-all duration-500 hover:scale-105 hover:shadow-2xl hover:shadow-trae-green/20"
          >
            <div class="aspect-video bg-gradient-to-br from-dark-secondary to-dark-bg relative overflow-hidden">
              <img
                :src="project.images[0]"
                :alt="project.title"
                class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
              <div class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 opacity-0 group-hover:opacity-100">
                <span class="inline-block px-3 py-1 bg-trae-green/20 text-trae-green text-xs font-medium rounded-full backdrop-blur-sm">
                  {{ getCategoryName(project.category) }}
                </span>
              </div>
            </div>
            <div class="p-6">
              <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-trae-green transition-colors duration-300">
                {{ project.title }}
              </h3>
              <p class="text-dark-muted text-sm line-clamp-2">
                {{ project.description }}
              </p>
            </div>
          </div>
        </div>

        <!-- 查看更多按钮 -->
        <div class="text-center mt-12">
          <button
            @click="scrollToProjects"
            class="inline-flex items-center gap-2 px-8 py-3 bg-trae-green/10 text-trae-green border border-trae-green/30 rounded-full font-medium hover:bg-trae-green hover:text-white transition-all duration-300 hover:scale-105 backdrop-blur-sm"
          >
            查看全部作品
            <ArrowDown class="w-4 h-4" />
          </button>
        </div>
      </div>
    </section>

    <!-- 作品集展示区 -->
    <section id="projects" class="py-20 px-4 sm:px-6 lg:px-8">
      <div class="max-w-7xl mx-auto">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-bold gradient-text mb-4">
            精选作品
          </h2>
          <p class="text-xl text-dark-muted max-w-2xl mx-auto mb-8">
            展示我们在不同领域的专业能力和创新成果
          </p>

          <!-- 详情页显示模式切换 -->
          <div class="flex items-center justify-center gap-4 mb-8">
            <span class="text-sm text-dark-muted">详情页显示方式：</span>
            <div class="flex bg-dark-secondary rounded-lg p-1">
              <button
                @click="detailViewMode = 'modal'"
                :class="[
                  'px-4 py-2 rounded-md text-sm font-medium transition-all duration-300',
                  detailViewMode === 'modal'
                    ? 'bg-trae-green text-white shadow-lg'
                    : 'text-dark-muted hover:text-white'
                ]"
              >
                弹窗模式
              </button>
              <button
                @click="detailViewMode = 'page'"
                :class="[
                  'px-4 py-2 rounded-md text-sm font-medium transition-all duration-300',
                  detailViewMode === 'page'
                    ? 'bg-trae-green text-white shadow-lg'
                    : 'text-dark-muted hover:text-white'
                ]"
              >
                新标签页
              </button>
            </div>
          </div>
        </div>

        <!-- 分类筛选 -->
        <div class="flex flex-wrap justify-center gap-4 mb-12">
          <button
            @click="selectedCategory = 'all'"
            :class="[
              'px-6 py-3 rounded-lg transition-all duration-300 font-medium',
              selectedCategory === 'all'
                ? 'bg-trae-green text-white'
                : 'bg-dark-secondary text-dark-muted hover:text-trae-green hover:border-trae-green border border-dark-border'
            ]"
          >
            全部作品
          </button>

          <button
            v-for="category in categories"
            :key="category.key"
            @click="selectedCategory = category.key"
            :class="[
              'px-6 py-3 rounded-lg transition-all duration-300 font-medium',
              selectedCategory === category.key
                ? 'bg-trae-green text-white'
                : 'bg-dark-secondary text-dark-muted hover:text-trae-green hover:border-trae-green border border-dark-border'
            ]"
          >
            {{ category.name }}
          </button>
        </div>

        <!-- 作品网格 -->
        <div class="projects-grid">
          <ProjectCard
            v-for="project in filteredProjects"
            :key="project.id"
            :project="project"
            @click="openProjectDetail"
            class="fade-in-up"
          />
        </div>

        <!-- 空状态 -->
        <div v-if="filteredProjects.length === 0" class="text-center py-20">
          <div class="text-6xl mb-4">🔍</div>
          <h3 class="text-xl font-semibold text-dark-text mb-2">暂无相关作品</h3>
          <p class="text-dark-muted">请尝试其他分类或查看全部作品</p>
        </div>
      </div>
    </section>

    <!-- 联系方式区 -->
    <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-dark-secondary">
      <div class="max-w-4xl mx-auto text-center">
        <h2 class="text-4xl md:text-5xl font-bold gradient-text mb-4">
          联系我们
        </h2>
        <p class="text-xl text-dark-muted mb-12">
          准备开始您的下一个项目？让我们一起创造精彩！
        </p>

        <div class="grid md:grid-cols-3 gap-8 mb-12">
          <div class="bg-dark-bg p-6 rounded-xl">
            <Mail class="w-8 h-8 text-trae-green mx-auto mb-4" />
            <h3 class="text-lg font-semibold text-dark-text mb-2">邮箱联系</h3>
            <p class="text-dark-muted">contact@firenight.studio</p>
          </div>

          <div class="bg-dark-bg p-6 rounded-xl">
            <MessageCircle class="w-8 h-8 text-trae-green mx-auto mb-4" />
            <h3 class="text-lg font-semibold text-dark-text mb-2">在线咨询</h3>
            <p class="text-dark-muted">微信: FireNightStudio</p>
          </div>

          <div class="bg-dark-bg p-6 rounded-xl">
            <Github class="w-8 h-8 text-trae-green mx-auto mb-4" />
            <h3 class="text-lg font-semibold text-dark-text mb-2">开源项目</h3>
            <p class="text-dark-muted">github.com/firenight</p>
          </div>
        </div>

        <div class="flex justify-center space-x-6">
          <a href="#" class="text-dark-muted hover:text-trae-green transition-colors duration-300">
            <Github class="w-6 h-6" />
          </a>
          <a href="#" class="text-dark-muted hover:text-trae-green transition-colors duration-300">
            <MessageCircle class="w-6 h-6" />
          </a>
          <a href="#" class="text-dark-muted hover:text-trae-green transition-colors duration-300">
            <Mail class="w-6 h-6" />
          </a>
        </div>
      </div>
    </section>

    <!-- 项目详情弹窗 -->
    <ProjectDetail
      v-if="selectedProject && detailViewMode === 'modal'"
      :project="selectedProject"
      @back="closeProjectDetail"
    />
  </div>
</template>
